<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>报表统计 - 银行系统</title>
    <!-- 引入Bootstrap CSS和Chart.js -->
</head>
<body>
   
    
    <div class="main-content">
        <div class="header">
            <h4>报表统计</h4>
            <!-- 用户信息部分 -->
        </div>
        
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white">
                <h5 class="mb-0">时间范围选择</h5>
            </div>
            <div class="card-body">
                <form method="get" action="{{ url_for('reports_statistics') }}">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">开始日期</label>
                            <input type="date" name="start_date" class="form-control" 
                                   value="{{ start_date }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">结束日期</label>
                            <input type="date" name="end_date" class="form-control" 
                                   value="{{ end_date }}">
                        </div>
                        <div class="col-md-3 align-self-end">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-filter"></i> 应用筛选
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        <div class="row g-4 mb-4">
            <!-- 交易类型统计 -->
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">交易类型分布</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="tradeTypeChart" height="250"></canvas>
                    </div>
                </div>
            </div>
            
            <!-- 存款类型分布 -->
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">存款账户分布</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="depositTypeChart" height="250"></canvas>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row g-4 mb-4">
            <!-- 每日交易趋势 -->
            <div class="col-md-8">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">每日交易趋势</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="dailyTrendChart" height="300"></canvas>
                    </div>
                </div>
            </div>
            
            <!-- 客户交易排名 -->
            <div class="col-md-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">交易量TOP10客户</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th>客户</th>
                                        <th>交易次数</th>
                                        <th>总金额</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for customer in customer_ranking %}
                                        <tr>
                                            <td>{{ customer[1] }}</td>
                                            <td>{{ customer[2] }}</td>
                                            <td>¥{{ customer[3]|format_currency }}</td>
                                        </tr>
                                    {% else %}
                                        <tr>
                                            <td colspan="3" class="text-center">暂无数据</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 交易类型分布图
        const tradeTypeCtx = document.getElementById('tradeTypeChart').getContext('2d');
        const tradeTypeChart = new Chart(tradeTypeCtx, {
            type: 'pie',
            data: {
                labels: [
                    {% for stat in trade_type_stats %}
                        '{{ stat[0] }} ({{ stat[1] }}笔)',
                    {% endfor %}
                ],
                datasets: [{
                    data: [
                        {% for stat in trade_type_stats %}
                            {{ stat[2]|abs }},
                        {% endfor %}
                    ],
                    backgroundColor: [
                        '#1a2a6c', '#28a745', '#fd7e14', '#dc3545', '#6f42c1'
                    ]
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'right',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.raw || 0;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = Math.round((value / total) * 100);
                                return `${label}: ¥${value.toLocaleString()} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });
        
        // 存款类型分布图
        const depositTypeCtx = document.getElementById('depositTypeChart').getContext('2d');
        const depositTypeChart = new Chart(depositTypeCtx, {
            type: 'doughnut',
            data: {
                labels: [
                    {% for deposit in deposit_distribution %}
                        '{{ deposit[0] }} ({{ deposit[1] }}个)',
                    {% endfor %}
                ],
                datasets: [{
                    data: [
                        {% for deposit in deposit_distribution %}
                            {{ deposit[2] }},
                        {% endfor %}
                    ],
                    backgroundColor: [
                        '#1a2a6c', '#b21f1f', '#fdbb2d', '#1a936f', '#4e54c8'
                    ]
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'right',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `${context.label}: ¥${context.raw.toLocaleString()}`;
                            }
                        }
                    }
                },
                cutout: '50%'
            }
        });
        
        // 每日交易趋势图
        const dailyTrendCtx = document.getElementById('dailyTrendChart').getContext('2d');
        const dailyTrendChart = new Chart(dailyTrendCtx, {
            type: 'line',
            data: {
                labels: [
                    {% for day in daily_trends %}
                        '{{ day[0].strftime("%m-%d") }}',
                    {% endfor %}
                ],
                datasets: [
                    {
                        label: '存款总额',
                        data: [
                            {% for day in daily_trends %}
                                {{ day[2] }},
                            {% endfor %}
                        ],
                        borderColor: '#28a745',
                        backgroundColor: 'rgba(40, 167, 69, 0.1)',
                        tension: 0.3,
                        fill: true
                    },
                    {
                        label: '取款总额',
                        data: [
                            {% for day in daily_trends %}
                                {{ day[3] }},
                            {% endfor %}
                        ],
                        borderColor: '#dc3545',
                        backgroundColor: 'rgba(220, 53, 69, 0.1)',
                        tension: 0.3,
                        fill: true
                    },
                    {
                        label: '交易次数',
                        data: [
                            {% for day in daily_trends %}
                                {{ day[1] }},
                            {% endfor %}
                        ],
                        borderColor: '#1a2a6c',
                        borderDash: [5, 5],
                        backgroundColor: 'transparent',
                        yAxisID: 'y1',
                        tension: 0.3
                    }
                ]
            },
            options: {
                responsive: true,
                interaction: {
                    mode: 'index',
                    intersect: false
                },
                scales: {
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                        title: {
                            display: true,
                            text: '金额 (¥)'
                        }
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        grid: {
                            drawOnChartArea: false
                        },
                        title: {
                            display: true,
                            text: '交易次数'
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>